<template>
  <div class="app-container">
    <el-table ref="dragTable" :show-header="false" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
      <el-table-column min-width="300px" label="Title" class-name="second">
        <template slot-scope="s">
          <span v-if="s.row.isDel==1"> {{ s.row.name }}</span>
          <span v-else style="color:#ff0000">{{ s.row.name }}(已删除)</span>
          <el-button-group style="float:right;margin-right:10px" class="btngroup">
            <el-button
              v-if="s.row.isDel==1"
              size="mini"
              type="primary"
              class="el-icon-edit"
              @click="edit(s.row.id)"
            />
            <el-button
              v-if="s.row.isDel==1"
              size="mini"
              type="danger"
              class="el-icon-delete"
              @click="handleModifyStatus(s.row.id,0)"
            />
            <el-button
              v-else
              size="mini"
              type="info"
              class="el-icon-platform-eleme"
              @click="handleModifyStatus(s.row.id,1)"
            />
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-if="dialogFormVisible" :append-to-body="true" :modal="true" :close-on-click-modal="false" title="修改技术点" :visible.sync="dialogFormVisible">
      <Edit :editId="editid" :dialogFormVisible.sync="dialogFormVisible" @getlist="getList" />
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import Edit from '@/views/ability/skill/edit'
export default {
  name: 'DragTable',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  components: { Edit },
  props: {
    parentid: {
      type: Number,
      default: undefined
    }
  },
  data() {
    return {
      list: [],
      sortable: null,
      oldList: [],
      newList: [],
      dialogFormVisible: false,
      editid: 0
    }
  },
  watch: {
    /* list: {
      immediate: true,
      handler(val) {
        this.list = val
      }
    } */
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.get('/skill/listByParent', result => {
        this.list = result.data.records
        if (this.list != null) {
          this.oldList = this.list.map(v => v.id)
          this.newList = this.oldList.slice()
          this.$nextTick(() => {
            this.setSort()
          })
        }
      }, { id: this.parentid })
    },
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
          this.list.splice(evt.newIndex, 0, targetRow)
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
          this.axios.get('/skill/sort', { params: { ids: this.newList.toString() }})
        }
      })
    },
    handleModifyStatus(id, isDel) {
      const txt = isDel === 0 ? '确定要删除该数据吗?' : '确定要恢复该数据吗?'
      this.del('/skill/del', result => {
        this.getList()
      }, { id: id, isDel: isDel }, txt)
    },
    edit(editId) {
      this.editid = editId
      this.dialogFormVisible = true
    }
  }
}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.btngroup{
  display: none;
}
.second:hover .btngroup{
  display: block;
  transition: 10s;
}
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
</style>
